<template>
        <van-tabbar v-model="active" route>
            <van-tabbar-item
                v-for="nav in navs"
                :key = "nav.path"
                :icon = "nav.meta.icon"
                :to = "nav.path"
             >
                {{ nav.meta.title }}
            </van-tabbar-item>
        
            <!-- <van-tabbar-item icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item icon="apps-o">分类</van-tabbar-item>
            <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
            <van-tabbar-item icon="user-o">我的</van-tabbar-item> -->

        </van-tabbar>
</template>

<script lang="ts" setup>
import { ref,computed } from 'vue'

import routes from '../../router/routes'

// 筛选在 tabbar 上需要渲染的对应路由信息
const navs: any = computed(() => routes.filter(route => route.meta?.inTabbar))

// 激活标签的索引
const active = ref(0)

</script>

<style scoped></style>
